<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>实名信息</span>
      </div>
    </template>
    <div class="tip">
      <svg
        t="1698217437072"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4016"
        width="16"
        height="16"
      >
        <path
          d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512S793.6 1024 512 1024zM512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"
          p-id="4017"
          fill="#8a8a8a"
        ></path>
        <path
          d="M469.333333 768c-17.066667 0-29.866667-8.533333-42.666667-21.333333-21.333333-29.866667-4.266667-72.533333 42.666667-187.733333 8.533333-17.066667 17.066667-38.4 25.6-55.466667-17.066667 12.8-42.666667 12.8-59.733333-4.266667-17.066667-17.066667-17.066667-42.666667 0-59.733333C443.733333 435.2 494.933333 384 554.666667 384c17.066667 0 29.866667 8.533333 42.666667 21.333333 21.333333 29.866667 4.266667 72.533333-42.666667 187.733333-8.533333 17.066667-17.066667 38.4-25.6 55.466667 17.066667-12.8 42.666667-12.8 59.733333 4.266667 17.066667 17.066667 17.066667 42.666667 0 59.733333C580.266667 716.8 529.066667 768 469.333333 768z"
          p-id="4018"
          fill="#8a8a8a"
        ></path>
        <path
          d="M576 277.333333m-64 0a1.5 1.5 0 1 0 128 0 1.5 1.5 0 1 0-128 0Z"
          p-id="4019"
          fill="#8a8a8a"
        ></path>
        <path
          d="M576 362.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333S622.933333 362.666667 576 362.666667zM576 234.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667S601.6 234.666667 576 234.666667z"
          p-id="4020"
          fill="#8a8a8a"
        ></path>
      </svg>
      <p>
        完成实名认证之后才能添加就诊人，正常进行挂号，为不影响后续步骤，建议提前实名认证
      </p>
    </div>
    <div class="contend">
      <div class="info" v-if="UserInfo.authStatus == 1">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item label-align="center" width="30px">
            <template #label>
              <div class="cell-item">用户姓名</div>
            </template>
            {{ UserInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label-align="center" width="30px">
            <template #label>
              <div class="cell-item">证件类型</div>
            </template>
            {{ UserInfo.certificatesType == "10" ? "身份证" : "户口本" }}
          </el-descriptions-item>
          <el-descriptions-item label-align="center" width="30px">
            <template #label>
              <div class="cell-item">证件号码</div>
            </template>
            {{ UserInfo.certificatesNo }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="form" v-else>
        <el-form label-width="80px" :model="parmas" :rules="rules" ref="form">
          <el-form-item label="用户姓名" prop="name">
            <el-input
              placeholder="请输入用户姓名"
              v-model="parmas.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="certificatesType">
            <el-select
              placeholder="请选择证件类型"
              style="width: 100%"
              v-model="parmas.certificatesType"
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="item in CerInfoArr"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="certificatesNo">
            <el-input
              placeholder="请输入证件号码"
              v-model="parmas.certificatesNo"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片上传" prop="certificatesUrl">
            <!-- 
                limit:允许上传文件的最大数量
                on-exceed 当超出限制时，执行的钩子函数
                on-success 文件上传成功时的钩子
             -->
            <el-upload
              list-type="picture-card"
              action="/api/oss/file/fileUpload?fileHost='userAuah'"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :on-preview="handlepreview"
              :on-remove="handleRemove"
              ref="upload"
            >
              <img
                src="../../../assets/images/auth_example.png"
                alt=""
                style="width: 100%"
              />
            </el-upload>
            <el-dialog
              v-model="dialogVisible"
              style="width: 500px; height: 500px"
            >
              <img
                w-full
                :src="parmas.certificatesUrl"
                alt="Preview Image"
                style="width: 100%"
              />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button @click="reset">重写</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
//引入组合式api
import { ref, onMounted, reactive } from "vue";
//引入接口
import { reqUserInfo, reqGetCertType, reqUserAuth } from "@/api/User/index";
//引入接口类型
import type {
  responseUserInfo,
  CertificatesTypeArray,
  CertificatesTypeAll,
  CertificatesParam,
} from "@/api/User/type";
import { ElMessage } from "element-plus";

//存储用户信息
let UserInfo = ref<any>({});
//存储证件信息
let CerInfoArr = ref<CertificatesTypeArray>([]);
//存储表单信息
//@ts-ignore
let parmas = reactive<CertificatesParam>({
  //@ts-ignore
  certificatesNo: "",
  //@ts-ignore
  certificatesType: "",
  //@ts-ignore
  certificatesUrl: "",
  //@ts-ignore
  name: "",
});
//获取组件实例
let form = ref<any>();
//获取组件实例
let upload = ref<any>();
//控制对话框显示与隐藏
let dialogVisible = ref<boolean>(false);
//挂载时获取用户信息
onMounted(() => {
  HasUserInfo();
  HasCardInfo();
});
//获取用户信息方法
const HasUserInfo = async () => {
  let result: responseUserInfo = await reqUserInfo();
  UserInfo.value = result.data;
};
//获取证件信息
const HasCardInfo = async () => {
  let result: CertificatesTypeAll = await reqGetCertType("CertificatesType");
  //整理信息
  CerInfoArr.value = result.data;
};
//超出限制时的钩子
const handleExceed = () => {
  ElMessage({
    type: "warning",
    message: "最多只能上传一张图片",
  });
};
//文件上传成功的钩子
const handleSuccess = (res: any) => {
  //清除表单校验
  form.value.clearValidate('certificatesUrl');
  parmas.certificatesUrl = res.data;
};
//预览文件的钩子
const handlepreview = () => {
  dialogVisible.value = true;
};
//移除图片的钩子
const handleRemove = () => {
  //@ts-ignore
  parmas.certificatesUrl = "";
};
//重置按钮
const reset = () => {
  //重置数据
  Object.assign(parmas, {
    //@ts-ignore
    certificatesNo: "",
    //@ts-ignore
    certificatesType: "",
    //@ts-ignore
    certificatesUrl: "",
    //@ts-ignore
    name: "",
  });
  //清空照片墙
  upload.value.clearFiles();
};
//确定按钮的回调
const submit = async () => {
  try {
    await form.value.validate();
    let result = await reqUserAuth(parmas);

    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: "认证成功",
      });
      //再次获取信息
      HasUserInfo();
    }
  } catch (error) {
    ElMessage({
        type:'error',
        message:'认证失败'
    })
  }
};
//自定义姓名校验规则
const validatorName = (rule: any, value: string, callback: any) => {
  //解决冒红光问题，此代码可忽略
  if(1>2)console.log(rule);
  
  //中国人正则表达式
  const reg = /^[\u4e00-\u9fa5]{2,10}$/;
  if(reg.test(value)) {
    callback()
  }else {
    callback(new Error('请输入正确的姓名'))
  }
}
//自定义证件类型校验规则
const validatorType = (rule: any, value: string, callback: any) =>{
    //解决冒红光问题，此代码可忽略
    if(1>2)console.log(rule);
    if(value=='10'||value=='20') {
      callback();
    }else {
      callback(new Error('请选择正确的证件类型'))
    }
}
//自定义证件号码
const validatorNo = (rule: any, value: string, callback: any) => {
  //解决冒红光问题，此代码可忽略
  if(1>2)console.log(rule);
  //身份证正则表达式
  const reg = /^[1-9]\d{5}[1-9]\d{3}\d{3}[0-9xX]$/;
  //户口本正则表达式
  const reg2 = /^[1-9]\d{5}[1-9]\d{3}\d{3}$/;
  if(reg.test(value)||reg2.test(value)) {
    callback()
  }else {
    callback(new Error('请输入正确的证件号码'))
  }
}
//自定义证件照片规则
const validatorUrl = (rule: any, value: string, callback: any) => {
    //解决冒红光问题，此代码可忽略
    if(1>2)console.log(rule);
    if(value.length) {
      callback();
    }else {
      callback(new Error('请上传证件照片'))
    }
}
//自定义表单校验规则
let rules = {
  name: [
    { required: true,validator:validatorName }
  ],
  certificatesType:[
    {
      required:true,validator:validatorType
    }
  ],
  certificatesNo:[
    {
      required:true,validator:validatorNo
    }
  ],
  certificatesUrl:[
    {
      required:true,validator:validatorUrl
    }
  ]
}
</script>

<style scoped lang="scss">
.box-card {
  .tip {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contend {
    margin: 20px auto;

    .form {
      width: 60%;
      margin-left: 18%;
    }
  }
}
</style>
